@import "tailwindcss";

:root {
  --background: #fefefe;
  --foreground: #333333;
  /* 小红书风格配色 */
  --xiaohongshu-red: #fe2c55;
  --xiaohongshu-pink: #ff6b9d; 
  --xiaohongshu-orange: #ff8a00;
  --xiaohongshu-yellow: #ffd93d;
  --xiaohongshu-warm-gray: #f8f8f8;
  --xiaohongshu-text-gray: #666666;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  
  /* 小红书风格色彩扩展 */
  --color-xiaohongshu-red: var(--xiaohongshu-red);
  --color-xiaohongshu-pink: var(--xiaohongshu-pink);
  --color-xiaohongshu-orange: var(--xiaohongshu-orange);
  --color-xiaohongshu-yellow: var(--xiaohongshu-yellow);
  --color-xiaohongshu-warm-gray: var(--xiaohongshu-warm-gray);
  --color-xiaohongshu-text-gray: var(--xiaohongshu-text-gray);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* 小红书风格的滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 文本截断样式 */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 安全区域适配 */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 小红书风格的渐变背景 */
.xiaohongshu-gradient {
  background: linear-gradient(135deg, #fe2c55 0%, #ff6b9d 100%);
}

/* 毛玻璃效果 */
.backdrop-blur-glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 卡片阴影 */
.card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-shadow-hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
.animate-heart {
  animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 页面加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 文艺风格的浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* 渐变文字闪烁 */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.shimmer-text {
  background: linear-gradient(90deg, #fe2c55 0%, #ff6b9d 50%, #ff8a00 100%);
  background-size: 200px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* 图片加载动画 */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 响应式字体大小 */
@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 1025px) {
  html {
    font-size: 16px;
  }
}
